<script setup lang="ts">
import { computed, ref } from "vue";

type Prop = {
  title?: string;
  description?: string;
  showBody?: boolean;
  check?: boolean;
  checkModel?: any;
  checkOnBody?: boolean;
  type?: "simple" | "border";
  collapse?: boolean;
};
const props = withDefaults(defineProps<Prop>(), {
  showBody: true,
  type: "border"
});

const emit = defineEmits(["checkChanged", "expanded"]);

const checkChanged = (value: boolean) => {
  emit("checkChanged", value);
};

const _checkModel = computed({
  get() {
    return !!props.checkModel;
  },
  set(value) {
    checkChanged(value);
    if (!value) {
      // bodyExpanded.value = false;
      updateExpanded(false);
    } else if (props.collapse) {
      // bodyExpanded.value = true;
      updateExpanded(true);
    }
  }
});

const bodyExpanded = ref(false);

const updateExpanded = (exp: boolean) => {
  bodyExpanded.value = exp;
  emit("expanded", exp);
};

// body控制优先级:   checkOnBody > collapse > showBody
const bodyVisible = computed(() => {
  if (props.check) {
    if (props.checkOnBody && props.collapse) {
      return bodyExpanded.value;
    }
    return _checkModel.value;
  }
  if (props.collapse) {
    return bodyExpanded.value;
  }

  return props.showBody;
});

const onHeadClick = () => {
  if (props.collapse) {
    if (props.check && props.checkOnBody) {
      if (_checkModel.value) {
        updateExpanded(!bodyExpanded.value);
      }
    } else {
      updateExpanded(!bodyExpanded.value);
    }
  }
};
</script>

<template>
  <div
    :class="['section', `section-style-${type}`]"
    :style="{ '--section-body-padding': check ? '0 0 0 20px' : '0' }"
  >
    <div
      :class="[
        'section-head',
        collapse ? `section-head-extension-collapse` : ''
      ]"
    >
      <div v-if="check">
        <el-checkbox v-model="_checkModel" @change="checkChanged" />
      </div>
      <div class="flex w-full h-full items-center" @click="onHeadClick">
        <div class="flex flex-col h-full w-full">
          <slot name="head">
            <span v-if="title">{{ title }}</span>
            <span v-if="description" class="section-head-description">
              {{ description }}
            </span>
          </slot>
        </div>
        <slot name="head-action" />
        <el-icon
          v-if="collapse"
          :class="`ml-3 head-collapse__arrow__${bodyExpanded ? 'expand' : 'collapse'}`"
        >
          <ArrowDown />
        </el-icon>
      </div>
    </div>
    <el-collapse-transition>
      <div v-if="bodyVisible" class="section-body">
        <slot />
      </div>
    </el-collapse-transition>
  </div>
</template>
<style lang="scss" scoped>
.section {
  width: 100%;
  padding: 10px;
  border-radius: 8px;

  --section-body-padding: 0;
}

.section-style-border {
  border: var(--el-border);
}

.section-style-collapse {
  // border: var(--el-border);
  border: none;
  --section-body-padding: 5px 0;
}

.section-style-simple {
  border: none;
  --section-body-padding: 5px 0;
}

.section-head {
  display: flex;
  flex-direction: row;
  font-size: 14px;
  font-weight: 600;
  gap: 10px;
  justify-content: start;
  align-items: center;
  height: auto;
}

.head-collapse__arrow__expand {
  transform: rotate(0deg);
  transition: all 0.3s;
}

.head-collapse__arrow__collapse {
  transform: rotate(-90deg);
  transition: all 0.3s;
}

.section-head-extension-collapse {
  cursor: pointer;
}

.section-head-description {
  font-size: 12px;
  font-weight: 400;
  color: var(--el-text-color-secondary);
}

.section-body {
  margin-top: 10px;
  width: 100%;
  padding: var(--section-body-padding);
}
</style>
